﻿<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>中国城市空气质量实况</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="China">
<meta name="author" content="kener.linfeng@gmail.com">

<link href="../../../asset/css/bootstrap.css" rel="stylesheet">
<link href="../../../asset/css/bootstrap-responsive.css"
	rel="stylesheet">
<link rel="shortcut icon" href="../../../asset/ico/favicon.png">
<style type="text/css">
* {
	font-family: "Microsoft YaHei" !important;
}

body {
	background-image: url(../../../asset/img/groovepaper.png);
	background-repeat: repeat;
}

header {
	background-image: url(../../../asset/img/tweed.png);
	background-repeat: repeat;
}

h1 {
	color: #FFF;
	font-weight: bolder;
	margin: 20px 0 5px 0;
}

header p {
	color: #FFF;
	margin-bottom: 20px;
}

section {
	background-image: url(../../../asset/img/ticks.png);
	background-repeat: repeat;
	padding: 10px;
}

footer {
	height: 100px;
	background-image: url(../../../asset/img/tweed.png);
	background-repeat: repeat;
	font-size: 14px;
	color: #CCC;
	text-align: center;
	padding-top: 15px;
	margin-top: 15px;
}

.nav.nav-tabs.nav-justified {
	margin-bottom: 0;
}

.ctrl-wrap {
	padding: 20px 20px 0 20px;
	text-align: center;
	border-left: 1px solid #dddddd;
	border-right: 1px solid #dddddd;
}

.ctrl-content .btn {
	width: 7%;
}

.tab-content {
	padding: 20px;
	border: 1px solid #dddddd;
	border-top: 0px;
}

.g2wrap {
	height: 300px;
	width: 33%;
	float: left;
}

input[type="radio"] {
	margin: -5px 5px 0;
}

label {
	display: inline-block;
	margin-bottom: 5px;
	font-weight: bold;
}

footer a:hover {
	color: #62C462
}
</style>
</head>

<body>
	<!-- HEADER -->
	<header>
		<div class="container">
			<h1>中国主要城市空气质量实况</h1>
			<p>
				数据更新时间：<span id="time">****-**-** --:--:--</span>
			</p>
		</div>
	</header>
	<section>
		<div class="container">
			<strong>引言：</strong>你关注或者不关注，它就在我们身边...
			<div style="text-align: right">
				<i>忘记从什么时候开始，用颜色表示空气；不知道什么时候可以，用甜度描述空气。</i> from <a
					href="http://www.pm25.in/" target="_blank">pm25.in</a>
			</div>
		</div>
	</section>
	<div class="container">
		<!-- CONTAINER -->
		<div class="row">
			<div id="overview" class="span12">
				<h3>概况：今天哪里又爆表了？</h3>
				<!-- Nav tabs -->
				<ul class="nav nav-tabs nav-justified">
					<li class="active"><a id="o-aqi" href="#main0"
						data-toggle="tab">AQI<br />（空气质量）
					</a></li>
					<li><a id="o-pm25" href="#main0" data-toggle="tab">PM 2.5<br />（细颗粒物）
					</a></li>
					<li><a id="o-pm10" href="#main0" data-toggle="tab">PM 10<br />（可吸入颗粒物）
					</a></li>
					<li><a id="o-co" href="#main0" data-toggle="tab">CO<br />（一氧化碳）
					</a></li>
					<li><a id="o-no2" href="#main0" data-toggle="tab">NO2<br />（二氧化氮）
					</a></li>
					<li><a id="o-o3" href="#main0" data-toggle="tab">O3<br />（臭氧）
					</a></li>
					<li><a id="o-so2" href="#main0" data-toggle="tab">SO2<br />（二氧化硫）
					</a></li>
				</ul>
				<div class="tab-content" id="main0">
					<div class="span8" style="margin: 0 30px 0 0">
						<div id="g0" style="height: 430px"></div>
					</div>
					<div style="min-height: 430px;">
						<h4 id="overview-head"></h4>
						<hr>
						<p id="overview-content"></p>
						<p style="text-align: right">
							更多详见 <a id="overview-link" target="_blank">百度百科 »</a>
						</p>
					</div>
				</div>
			</div>
			<div class="span12" style="margin-top: 15px;">
				<h3>重点城市对比</h3>
				<div id="g1" style="height: 400px"></div>
				<h4 style="text-align: center">“PM2.5 vs 经济 vs 人口” 关联分析</h4>
				<div id="g20" class="g2wrap"></div>
				<div id="g21" class="g2wrap"></div>
				<div id="g22" class="g2wrap"></div>
			</div>
			<div class="span12" style="margin-top: 15px;">
				<h3>空气质量排行榜</h3>
				<!-- Nav tabs -->
				<ul class="nav nav-tabs nav-justified">
					<li class="active"><a id="r-aqi" href="#main3"
						data-toggle="tab">AQI<br />（空气质量）
					</a></li>
					<li><a id="r-pm25" href="#main3" data-toggle="tab">PM 2.5<br />（细颗粒物）
					</a></li>
					<li><a id="r-pm10" href="#main3" data-toggle="tab">PM 10<br />（可吸入颗粒物）
					</a></li>
					<li><a id="r-co" href="#main3" data-toggle="tab">CO<br />（一氧化碳）
					</a></li>
					<li><a id="r-no2" href="#main3" data-toggle="tab">NO2<br />（二氧化氮）
					</a></li>
					<li><a id="r-o3" href="#main3" data-toggle="tab">O3<br />（臭氧）
					</a></li>
					<li><a id="r-so2" href="#main3" data-toggle="tab">SO2<br />（二氧化硫）
					</a></li>
				</ul>
				<div class="tab-content" id="main3">
					<div id="g3" style="height: 700px"></div>
				</div>
			</div>
			<!--/span-->
		</div>
		<!--/row-->
	</div>
	<!-- FOOTER -->
	<footer>
		<p>
			&copy; 2014 <a href="http://weibo.com/wfsr" target="_blank">大佛</a>（百度）
			&middot; <a href="http://weibo.com/kenerlinfeng" target="_blank">林峰</a>（百度）
			特别鸣谢 <a href="http://www.pm25.in/" target="_blank">PM25.in</a>
			&middot; <a href="http://www.iconpng.com/" target="_blank">iconpng</a>
		</p>
		<p>
			<a href="http://echarts.baidu.com" target="_blank">Data
				Visualization by ECharts</a>
		</p>
	</footer>

	<script src="../../../asset/js/jquery.js"></script>
	<script src="../../../asset/js/bootstrap-transition.js"></script>
	<script src="../../../asset/js/bootstrap-alert.js"></script>
	<script src="../../../asset/js/bootstrap-modal.js"></script>
	<script src="../../../asset/js/bootstrap-dropdown.js"></script>
	<script src="../../../asset/js/bootstrap-scrollspy.js"></script>
	<script src="../../../asset/js/bootstrap-tab.js"></script>
	<script src="../../../asset/js/bootstrap-tooltip.js"></script>
	<script src="../../../asset/js/bootstrap-popover.js"></script>
	<script src="../../../asset/js/bootstrap-button.js"></script>
	<script src="../../../asset/js/bootstrap-collapse.js"></script>
	<script src="../../../asset/js/bootstrap-carousel.js"></script>
	<script src="../../../asset/js/bootstrap-typeahead.js"></script>
	<!-- core -->
	<script src="../../www/js/echarts.js"></script>
	<script src="./js/option0.js"></script>
	<script src="./js/option1.js"></script>
	<script src="./js/option2.js"></script>
	<script src="./js/option3.js"></script>
	<script src="./js/china_city_geo.js"></script>
	<script src="./js/data.js"></script>
	<script src="./js/main.js"></script>
</body>
</html>